<template>
  <basic-container>
    <div style="display:flex;align-items:center">
      <img src="/img/bg/logo.png"
           width="100"
           alt="">
      <h2>北京云集汇通科技有限公司<small>（100-299人）</small></h2>
    </div>
    <h5 style="margin-left:100px">山东省潍坊市寒亭区北海路3777号45号楼</h5>
    <avue-tabs :option="option"
               v-model="form"
               @change="handleChange"></avue-tabs>
    <avue-detail v-model="form"
                 :option="detailOption"></avue-detail>
  </basic-container>
</template>

<script>
const tab1Form = {
  labelWidth: 150,
  column: [
    {
      label: "工商注册号",
      prop: "gszch",
      span: 8
    },
    {
      label: "组织机构代码",
      prop: "zzjgdm",
      span: 8
    },
    {
      label: "统一社会信用代码",
      prop: "dm",
      span: 8
    },
    {
      label: "公司类型",
      prop: "gslx",
      span: 8
    },
    {
      label: "纳税人识别号",
      prop: "nsrsbh",
      span: 8
    },
    {
      label: "行业",
      prop: "hy",
      span: 8
    },
    {
      label: "核准日期",
      prop: "hzrq",
      span: 8
    },
    {
      label: "人员规模",
      prop: "rygm",
      span: 8
    },
    {
      label: "实缴资本",
      prop: "sjzb",
      span: 8
    },
    {
      label: "登记机关",
      prop: "djjg",
      span: 8
    },
    {
      label: "注册地址",
      prop: "zcdd",
      span: 24
    },
    {
      label: "经营范围",
      prop: "jyfw",
      type: "textarea",
      span: 24,
      minRows: 8
    }
  ]
};
const tab2Form = {
  group: [
    {
      icon: "el-icon-info",
      label: "用电详情",
      column: [
        {
          label: "今日用电",
          prop: "jryd"
        },
        {
          label: "昨日用电",
          prop: "zryd"
        },
        {
          label: "本周用电",
          prop: "bzyd"
        },
        {
          label: "本月用电",
          prop: "byyd"
        },
        {
          label: "最大功率",
          prop: "zdgl"
        },
        {
          label: "最小功率",
          prop: "zxgl"
        }
      ]
    },
    {
      icon: "el-icon-info",
      label: "费用统计",
      column: [
        {
          label: "今日费用",
          prop: "jrfy"
        },
        {
          label: "昨日费用",
          prop: "zrfy"
        },
        {
          label: "本周费用",
          prop: "bzfy"
        },
        {
          label: "本月费用",
          prop: "byfy"
        }
      ]
    }
  ]
};
const tab3Form = {
  column: [
    {
      label: "普惠金融指数",
      prop: "phjrzs"
    },
    {
      label: "企业贡献指数",
      prop: "qygx"
    },
    {
      label: "综合业务饱和度指数",
      prop: "zhyw"
    }
  ]
};
export default {
  data() {
    return {
      tab1Form: tab1Form,
      tab2Form: tab2Form,
      tab3Form: tab3Form,
      form: {
        phjrzs: 12,
        qyf: 12,
        zhyw: 12,
        jryd: "22度",
        zryd: "12度",
        bzyd: "14度",
        byyd: "232度",
        zdgl: "12瓦",
        dxgl: "2瓦",
        jrfy: "122元",
        zrfy: "122元",
        bzfy: "122元",
        byfy: "122元",
        gszch: 110108022895312,
        zzjgdm: "MA00BKBJ7",
        dm: "91110108MA00BKBJ7F",
        gslx: "其他有限责任公司",
        nsrsbh: "91110108MA00BKBJ7F",
        hy: "科技推广和应用服务业",
        yyxe: "2017-01-25至2047-01-24",
        hzrq: "4637-67-63",
        sjzb: "250万人民币",
        djjg: "北京市工商行政管理局海淀分局",
        rygm: "99-100",
        zcdd: "北京市海淀区天秀路10号中国农大国际创业园2号楼6层6054室",
        jyfw:
          "技组龙发、技组前维、技组转步、技组咨询、技组克志、技组培训（不责兴退全国招病）；计吃机底反前维；们础软目前维、件用软目前维；销售通讯设喜、电神李品、计吃机、软目乃辅助设喜；吧修仪子仪表；些业假章咨询；货物进出口、技组进出口。（些业运再站主选择经营而朝，龙展经营怎动；运再须经批准的而朝，经很么称怕批准都运批准的内容龙展经营怎动；不责从张本接李业政策禁当精限制讲而朝的经营怎动。）"
      },
      detailOption: tab1Form,
      option: {
        column: [
          {
            icon: "el-icon-info",
            label: "企业信息",
            prop: "tab1"
          },
          {
            icon: "el-icon-warning",
            label: "用电详情",
            prop: "tab2"
          },
          {
            icon: "el-icon-warning",
            label: "金企云指标",
            prop: "tab3"
          }
        ]
      }
    };
  },
  methods: {
    handleChange(type) {
      this.detailOption = this[type.prop + "Form"];
    }
  }
};
</script>

<style>
</style>
